<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <el-button type="primary" icon="ele-Plus">添加</el-button>
      </template>
      <el-table :data="tabelData" border stripe>
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column label="品牌名称" prop="tmName" />
        <el-table-column label="品牌logo" prop="logoUrl">
          <template v-slot="{ row }">
            <el-image
              style="height: 100px"
              :src="row.logoUrl"
              fit="fill"
              :lazy="true"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default>
            <el-button type="primary" size="samll" icon="ele-Edit"
              >修改</el-button
            >
            <el-button type="danger" size="samll" icon="ele-Delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:page-size="pageSize"
        :pager-count="pageCount"
        :page-count="5"
        :page-sizes="[3, 5, 7, 9]"
        v-model:current-page="currentPage"
        layout=" prev, pager, next, sizes"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Trademark",
});
</script>

<script setup lang="ts">
import { ref,onMounted ,watch} from "vue";
//引入品牌列表的数组的类型
import type {trademarkListType} from "@/api/trademark"
//获取trademark的store对象
import useTrademarkStore from "@/stores/trademark";
const trademarkStore=useTrademarkStore()
const tabelData=ref<trademarkListType>([])

//page的数据
//1. 每页条数
const pageSize = ref(3);
//2. 总页数
const pageCount = ref(0);
//3. 当前页码
const currentPage = ref(1);
//封装一个请求分页列表，并处理数据的函数
const initTrademark=async()=>{
  try{
    await trademarkStore.getTrademake(currentPage.value,pageSize.value)
    tabelData.value=trademarkStore.trademarkList
    pageCount.value=trademarkStore.pages
  }catch(e:any){
      alert(e.message)
  }
}
//在mounted中发送请求获取trademark的数据
onMounted(()=>{
  initTrademark()
})
// watch监听当前页码和每页条数 只要发生变化，则重新发生请求
watch([pageSize,currentPage],()=>{
  initTrademark()
})
</script>

<style lang="scss" scoped></style>
